
<template>
   <tiny-collapse class="demo-collapse-wrap" v-model="data.activeTab">
            <tiny-collapse-item title="个人信息" name="1">
                <tiny-layout>
                    <div class="userInfo">
                        <tiny-form  :responsive-layout="true" size="small"
                            label-position="right"
                            :model="menuData"
                            label-suffix="："
                            label-width="100px">
                            <tiny-form-item label="id" prop="id" v-if="false"  >
                                <tiny-input v-model="data.user.id"  ></tiny-input>
                            </tiny-form-item>
                            <tiny-form-item label="用户名" prop="username">
                                <tiny-input v-model="data.user.username" disabled  ></tiny-input>
                            </tiny-form-item>
                            <tiny-form-item label="账户类型" prop="accountType">
                                <tiny-input v-model="data.user.accountType" disabled  ></tiny-input>
                            </tiny-form-item>
                            <tiny-form-item label="系统账户" prop="originUsername">
                                <tiny-input v-model="data.user.originUsername" disabled ></tiny-input>
                            </tiny-form-item>
                            <tiny-form-item label="昵称" prop="nick">
                                <tiny-input v-model="data.user.nick" ></tiny-input>
                            </tiny-form-item>
                            <tiny-form-item label="手机" prop="phone">
                                <tiny-input v-model="data.user.phone"></tiny-input>
                            </tiny-form-item>
                            <tiny-form-item label="邮箱" prop="email">
                                <tiny-input v-model="data.user.email" ></tiny-input>
                            </tiny-form-item>
                            <tiny-form-item >
                                <tiny-button ghost type="success" @click="saveUser">保存</tiny-button>
                                <tiny-button ghost type="warning" @click="editPassword">修改密码</tiny-button>
                            </tiny-form-item>
                        </tiny-form>
                    </div>
                </tiny-layout>
            </tiny-collapse-item>

            <tiny-collapse-item title="应用管理" name="2">
                <tiny-layout>
                    <div class="userInfo">
                        <tiny-form  :responsive-layout="true" size="small"
                            label-position="right"
                            :model="menuData"
                            label-suffix="："
                            label-width="100px">

                            <tiny-form-item label="系统" prop="appName">
                                <tiny-input v-model="data.app.appName"   ></tiny-input>
                            </tiny-form-item>
                            <tiny-form-item label="系统密码" prop="password">
                                <tiny-input v-model="data.app.password"  type="password" show-password ></tiny-input>
                            </tiny-form-item>
                            <tiny-form-item >
                                <tiny-button ghost type="success" @click="modifyManager">验证并成为管理员</tiny-button>
                            </tiny-form-item>
                            </tiny-form>
                    </div>
                </tiny-layout>
            </tiny-collapse-item>
    </tiny-collapse>

    <tiny-dialog-box v-model:visible="data.isMid" center title="修改密码" width="30%">
            <tiny-form :inline="true" ref="registerForm" label-width="100px" label-position="right" size="small"  >
                    <tiny-row :flex="true" class="row-bg align" justify="center" >
                        <tiny-col class="col md" >
                            <tiny-form-item label="用户名">
                            <tiny-input v-model="data.user.username" disabled></tiny-input>
                        </tiny-form-item>
                        </tiny-col>
                    </tiny-row>
                    <tiny-row :flex="true" class="row-bg align" justify="center">
                        <tiny-col class="col md">
                            <tiny-form-item label="旧密码" prop="password">
                                <tiny-input v-model="data.changPassword.oldPassword" type="password" placeholder="旧密码" show-password></tiny-input>
                            </tiny-form-item>
                        </tiny-col>
                    </tiny-row>
                    <tiny-row :flex="true" class="row-bg align" justify="center">
                        <tiny-col class="col md">
                            <tiny-form-item label="新密码" prop="newPassword">
                                <tiny-input v-model="data.changPassword.newPassword" type="password" placeholder="新密码" show-password></tiny-input>
                            </tiny-form-item>
                        </tiny-col>
                    </tiny-row>
                    <tiny-row :flex="true" class="row-bg align" justify="center">
                        <tiny-col class="col md">
                            <tiny-form-item label="确认密码" prop="newPassword2">
                                <tiny-input v-model="data.changPassword.newPassword2" type="password" placeholder="确认密码" show-password></tiny-input>
                            </tiny-form-item>
                        </tiny-col>
                    </tiny-row>
                    <tiny-row :flex="true" class="row-bg align" justify="center">
                        <tiny-form-item label=" " >
                            <tiny-button @click="changPwd" type="success" size="small" ghost>确认</tiny-button>
                            <tiny-button @click="callBtn" type="info" size="small" ghost>取消</tiny-button>
                        </tiny-form-item>
                    </tiny-row>
                </tiny-form>

    </tiny-dialog-box>
</template>
<script setup>
import { reactive, onBeforeMount, onMounted, getCurrentInstance } from 'vue';
import { TinyCollapse, TinyCollapseItem ,TinyDialogBox,Modal} from '@opentiny/vue'
let { proxy } = getCurrentInstance(); 
const data = reactive({
    activeTab: '1',
    tableData: { data: {}, cols: [], config: {} },
    user:{},
    app:{},
    changPassword:{},
    isMid:false,
});
const editPassword = ()=>{
    data.isMid=true;
}
const callBtn = ()=>{
    data.isMid=false;
}
const modifyManager =()=>{
    proxy.$api.taskJob.modifyManager(data.app).then(res => {
        if(res.success){
            Modal.message({status:'success', message: "修改成功"});
        }else{
            Modal.message({status:'warning', message: res.message});
        }
    })
}
const changPwd =()=>{
    data.changPassword.username=data.user.originUsername;
    proxy.$api.taskJob.userModifyPwd(data.changPassword).then(res => {
        if(res.success){
            Modal.message({status:'success', message: "修改成功"});
            data.isMid=false;
        }else{
            Modal.message({status:'warning', message: res.message});
        }
    })
}
// 修改用户信息
const saveUser =()=>{
    proxy.$api.taskJob.userModify(data.user).then(res => {
        console.log(res);
        if(res.success){
            Modal.message({status: 'success', message: "修改成功"});
        }else{
            Modal.message({status:'warning', message: res.message});
        }
      
    })
}
onMounted(() => {
    proxy.$api.taskJob.queryUserDetail().then(res => {
        data.user = res.data;
    })
});
</script>


<style lang="scss" scoped>
.userInfo{
    width: 340px;
}

</style>